<template>
  <div class="bottom">
    <div class="nav">
      <el-button class="goback" @click="goback">
        <i class="el-icon-arrow-left">返回</i>
      </el-button>
      <div class="breadcrumb">
        <span>当前位置：</span>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/index/Patrol/Question' }" replace>巡视巡察</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/index/Patrol/Question' }" replace>问题清单</el-breadcrumb-item>
          <el-breadcrumb-item>创建问题清单</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <!-- 整改对象 -->
    <div class="item_wrap">
      <div class="title_wrap">
        <div class="line"></div>
        <div class="title">整改对象</div>
      </div>
      <div class="content_wrap">
        <div class="item">
          <div class="name">整改对象：</div>
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="item">
          <div class="name">联系人：</div>
          <el-input v-model="name" placeholder="请输入联系人姓名"  type="text" maxlength="25"
  show-word-limit></el-input>
        </div>
        <div class="item">
          <div class="name">联系方式：</div>
          <el-input v-model="phone" placeholder="请输入联系方式"   type="text"  maxlength="11"
  show-word-limit></el-input>
        </div>
      </div>
    </div>
    <!-- 问题清单 -->
    <div class="item_wrap">
      <div class="title_wrap hasbutton">
        <div class="left">
          <div class="line"></div>
          <div class="title">问题清单</div>
        </div>
        <el-button @click="addMenu">新建</el-button>
      </div>
      <div v-if="questionData.length == 0" class="note">暂无问题清单</div>
      <el-table v-else :data="questionData" border>
        <el-table-column type="index" label="序号" width="53px" align="center"></el-table-column>
        <el-table-column prop="category" label="问题分类" align="center" width="423px">
          <template slot-scope="scope">
            <el-input
              class="classInput"
              v-if="scope.row.isSave"
              v-model="scope.row.category"
              placeholder="请输入问题分类"
            ></el-input>
            <div v-else>{{ scope.row.category }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="问题清单">
          <template slot-scope="scope">
            <el-input v-if="scope.row.isSave" v-model="scope.row.name" placeholder="请输入问题清单"></el-input>
            <div v-else>{{ scope.row.name }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="223px" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.isSave" type="text" @click="saveScope(scope.row)">保存</el-button>
            <el-button v-else type="text" @click="editScope(scope.row)">编辑</el-button>
            <span class="done">|</span>
            <el-popconfirm
              title="确定删此该信息吗？"
              hideIcon
              cancelButtonType="button"
              @onConfirm="deletScope(scope.row)"
            >
              <el-button slot="reference" type="text">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 问题清单附件 -->
    <div class="item_wrap">
      <div class="title_wrap hasbutton">
        <div class="left">
          <div class="line"></div>
          <div class="title">问题清单附件</div>
          <div class="note">文件仅支持PDF格式</div>
        </div>
        <el-upload
          action
          :auto-upload="false"
          :file-list="fileList"
          accept=".PDF"
          :on-change="handleChange"
          :show-file-list="false"
        >
          <el-button>上传文件</el-button>
        </el-upload>
        <!-- <input
          class="fileInput"
          type="file"
          @change="getFile($event)"
          multiple="multiplt"
          accept=".pdf"
        />
        <label for="fileInput" class="file-btn">上传文件</label>-->
      </div>
      <div v-if="fileList.length == 0" class="note">暂无附件</div>
      <div v-else class="fileList">
        <div v-for="(item, index) in fileList" :key="index">
          <div class="file_item">
            <img class="left" :src="pdf" alt />
            <div class="right">
              <div class="title">{{ item.name }}</div>
              <div class="done_wrap">
                <div class="size">{{ item.size | filterSize }}</div>
                <div class="innerRight">
                  <div class="button" @click="previewFile(index)">
                    <img class="image1" :src="preview" alt />
                    <span>预览</span>
                  </div>
                  <span class="done">|</span>
                  <div class="button" @click="downloadFile(index)">
                    <img class="image1" :src="download" alt />
                    <span>下载</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="del button" @click="delFile(index)">
              <i class="el-icon-close"></i>
            </div>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="fileUrl" alt class="img" />
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
    <!-- 整改过程 -->
    <div class="item_wrap bottom">
      <div class="title_wrap hasbutton">
        <div class="left">
          <div class="line"></div>
          <div class="title">整改过程</div>
        </div>
        <el-button @click="addMenu1">新建</el-button>
      </div>
      <div v-if="abarbeitungData.length == 0" class="note">暂无记录</div>
      <el-table v-else :data="abarbeitungData" border>
        <el-table-column type="index" label="序号" width="53px" align="center"></el-table-column>
        <el-table-column prop="title" label="主题">
          <template slot-scope="scope">
            <el-input v-if="scope.row.isSave" v-model="scope.row.title" placeholder="请输入主题"></el-input>
            <div v-else>{{ scope.row.title }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="person" label="责任人" align="center" width="250px">
          <template slot-scope="scope">
            <el-input
              class="classInput"
              v-if="scope.row.isSave"
              v-model="scope.row.person"
              placeholder="请输入责任人姓名"
            ></el-input>
            <div v-else>{{ scope.row.person }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="完成周期" align="center" width="380px">
          <template slot-scope="scope">
            <el-date-picker
              v-if="scope.row.isSave"
              v-model="scope.row.time"
              type="daterange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              range-separator="~"
              start-placeholder="年/月/日"
              end-placeholder="年/月/日"
            ></el-date-picker>
            <div v-else>
              <span>{{ scope.row.time[0] }}</span>
              <span class="done">至</span>
              <span>{{ scope.row.time[1] }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="223px" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.isSave" type="text" @click="saveScope1(scope.row)">保存</el-button>
            <el-button v-else type="text" @click="editScope1(scope.row)">编辑</el-button>
            <span class="done">|</span>
            <el-popconfirm
              title="确定删此该信息吗？"
              hideIcon
              cancelButtonType="button"
              @onConfirm="deletScope1(scope.row)"
            >
              <el-button slot="reference" type="text">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部按钮 -->
    <div class="button_wrap">
      <el-button type="primary" @click="submitQuestion">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pdf: require("@/assets/image/pdf.png"),
      preview: require("@/assets/image/preview.png"),
      download: require("@/assets/image/download.png"),
      value: "",
      options: [],
      nameOne: "",
      contact: "",
      name: "",
      phone: "",
      questionData: [],
      id: 0, //table数据每行唯一标识
      abarbeitungData: [],
      id1: 0,
      fileList: [],
      baseUrl: null,
      dialogVisible: false,
      fileUrl: null, //预览文件路径
      questionDataOne: [],
    };
  },
  created() {
    this.getOne();
    this.getTwo();
    this.getThree();
    // 获取整改对象
    this.Api.questionSelet().then((res) => {
      this.options = res.data;
    });
    this.baseUrl = this.$store.state.PortalManagement.fileIp;
    console.log(this.baseUrl);
  },
  methods: {
    getOne() {
      let row2 = window.sessionStorage.getItem("row1");
      if (row2 != null) {
        this.questionData = [JSON.parse(row2)];
      }
    },
    getTwo() {
      let rower = window.sessionStorage.getItem("rowyi");
      if (rower != null) {
        this.abarbeitungData = [JSON.parse(rower)];
      }
    },
    getThree() {
      let rowsan = window.sessionStorage.getItem("rowFile");
      if (rowsan != null) {
        this.fileList = JSON.parse(rowsan);
      }
    },
    submitQuestion() {
      this.abarbeitungData.forEach((res) => {
        this.questionDataOne.push({
          title: res.title,
          person: res.person,
          startDate: res.time[0],
          endDate: res.time[1],
        });
        console.log(this.questionData);
      });
      this.Api.createdQuestion({
        orgId: this.value,
        contact: this.name,
        contactInfo: this.phone,
        listingList: this.questionData,
        attachList: this.fileList,
        processList: this.questionDataOne,
      }).then((res) => {
        if (res.code == 0) {
          window.sessionStorage.removeItem("row1");
          window.sessionStorage.removeItem("rowyi");
          window.sessionStorage.removeItem("rowFile");
          this.$router.push({
            name: "Question",
          });
          this.$message.success(res.message);
        } else {
          return this.$message.error(res.message);
        }
      });
    },
    goback() {
      this.$router.go(-1);
    },
    addMenu() {
      this.questionData.push({
        id: ++this.id,
        category: "",
        name: "",
        isSave: true,
      });
    },
    saveScope(row) {
      console.log(row);
      row.isSave = false;
      let row1 = JSON.stringify(row);
      window.sessionStorage.setItem("row1", row1);
    },
    editScope(row) {
      row.isSave = true;
    },
    deletScope(row) {
      console.log(row.id);
      this.questionData.map((item, index) => {
        if (item.id == row.id) {
          this.questionData.splice(index, 1);
        }
      });
    },
    addMenu1() {
      this.abarbeitungData.push({
        id: ++this.id1,
        title: "",
        person: "",
        time: "",
        isSave: true,
      });
    },
    saveScope1(row) {
      row.isSave = false;
      let rowyi = JSON.stringify(row);
      window.sessionStorage.setItem("rowyi", rowyi);
    },
    editScope1(row) {
      row.isSave = true;
    },
    deletScope1(row) {
      console.log(row.id);
      this.abarbeitungData.map((item, index) => {
        if (item.id == row.id) {
          this.abarbeitungData.splice(index, 1);
        }
      });
    },
    getFile(event) {
      console.log(event);
      var files = event.target.files;
      let fileElement = document.querySelector(".fileInput");
      for (var i = 0; i < files.length; i++) {
        let url = this.getObjectURL(fileElement.files[i]);
        this.fileList.push({
          name: files[i].name,
          size: files[i].size,
          url: url.substring(5),
        });
      }
      console.log(this.fileList);
    },
    handleChange(file, fileList) {
      console.log(file);

      const formData = new FormData();
      formData.append("multipartFile", file.raw);
      this.Api.uploadFile(formData).then((res) => {
        // var data = { ...this.ruleForm, picUrl: res.data.url,pic:res.data.url };
        this.fileList.push({
          name: res.data.fileName,
          size: file.size,
          url: res.data.url,
        });
        console.log(this.fileList);
        let rowFile = JSON.stringify(this.fileList);
        window.sessionStorage.setItem("rowFile", rowFile);
        // for(let i in res.data){
        //   this.fileList.push(res.data[i])
        // }

        console.log(this.fileList, 111);
        // this.$emit("update:ruleForm", data);
      });
    },
    getObjectURL(file) {
      let url = null;
      if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      }
      return url;
    },
    getFileContent(fileInput, callback) {
      if (
        fileInput.files &&
        fileInput.files.length > 0 &&
        fileInput.files[0].size > 0
      ) {
        var file = fileInput.files[0];
        if (window.FileReader) {
          var reader = new FileReader();
          reader.onloadend = function (evt) {
            if (evt.target.readyState == FileReader.DONE) {
              callback(evt.target.result);
            }
          };
          // 包含中文内容用gbk编码
          reader.readAsText(file, "gbk");
        }
      }
    },
    previewFile(index) {
      console.log("附件预览", index);
      console.log(this.fileList[index].url);
      // this.dialogVisible = true;
      this.fileUrl = this.fileList[index].url;
      this.baseUrl = this.$store.state.PortalManagement.fileIp;
      this.fileUrl = this.baseUrl + this.fileList[index].url;
      var win = window.open();
      win.document.write(
        '<body style="margin:0px;"><object data="' +
          this.fileUrl +
          '" type="application/pdf" width="100%" height="100%"><iframe src="' +
          this.fileUrl +
          '" scrolling="no" width="100%" height="100%" frameborder="0" ></iframe></object></body>'
      );
    },
    downloadFile(index) {
      this.fileUrl = this.fileList[index].url;
      this.baseUrl = this.$store.state.PortalManagement.fileIp;
      this.fileUrl = this.baseUrl + this.fileList[index].url;
      console.log(this.fileUrl);
      window.open(this.fileUrl);
    },
    delFile(index) {
      this.fileList.splice(index, 1);
    },
  },
  filters: {
    filterSize(val) {
      return (val / 1024 / 1024).toFixed(1) + "M";
    },
  },
};
</script>

<style lang="less" scoped>
.bottom {
  padding-bottom: 40px;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  .goback {
    width: 70px;
    height: 36px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(221, 221, 221, 1);
    padding: 0;
  }

  .breadcrumb {
    display: flex;
    align-items: center;
  }
}

.img {
  width: 100px;
  height: 100px;
}

.item_wrap {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 10px;

  .title_wrap {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .line {
      width: 4px;
      height: 14px;
      background: #3d7fff;
    }

    .title {
      font-weight: 500;
      margin: 0 10px;
      font-size: 16px;
      color: #333;
    }
  }

  .content_wrap {
    display: flex;

    .item {
      display: flex;
      align-items: center;
      margin-right: 60px;

      .name {
        font-style: 14px;
        font-weight: 500;
        color: #333;
        margin-right: 10px;
      }

      .el-select,
      .el-input {
        width: 320px;
        // height: 36px;
      }
    }
  }
}

.hasbutton {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    display: flex;
    align-items: center;
  }

  .el-button {
    width: 70px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(61, 127, 255, 1);
    border-radius: 4px;
    text-align: center;
    line-height: 30px;
    color: #3d7fff;
  }
}

.note {
  font-size: 14px;
  color: #999;
}

.classInput {
  /deep/.el-input__inner {
    text-align: center;
  }
}

.done {
  margin: 0 10px;
}

.time {
  display: flex;
  align-items: center;
}

.button_wrap {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 100px;
  right: 0;
  z-index: 99;
  text-align: right;
  padding: 10px 20px;

  .el-button {
    margin-left: 10px;
  }
}

.fileList {
  display: flex;
  flex-wrap: wrap;
}

.file_item {
  position: relative;
  width: 360px;
  height: 80px;
  border-radius: 4px;
  border: 1px solid rgba(221, 221, 221, 1);
  margin-right: 20px;
  margin-bottom: 20px;
  padding: 15px;
  display: flex;

  .left {
    width: 50px;
    height: 50px;
    margin-right: 15px;
  }

  .right {
    font-size: 14px;

    .title {
        width: 250px;
      color: #333;
      margin-bottom: 10px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .done_wrap {
      display: flex;
      align-items: center;

      .size {
        color: #999;
        margin-right: 110px;
      }

      .innerRight {
        text-align: right;
        color: #3d7fff;
        display: flex;
        align-items: center;
      }
    }
  }

  .button {
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .image1 {
    vertical-align: middle;
  }

  .del {
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background: rgba(204, 204, 204, 1);
    border-radius: 50%;
    position: absolute;
    right: 5px;
    top: 5px;
  }
}

.fileInput {
  width: 70px;
  height: 30px;
  opacity: 0; //隐藏type file 默认样式
  position: absolute;
  right: 30px;
}

.file-btn {
  //上传文件自定义样式
  width: 70px;
  height: 30px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  border: 1px solid rgba(61, 127, 255, 1);
  color: #3d7fff;
  line-height: 30px;
  text-align: center;
  font-weight: 500;
  font-style: 14px;
}
</style>
